import Taro, { Component, Config } from '@tarojs/taro'
import { View,  Swiper, SwiperItem, Image} from '@tarojs/components'
import './index.less'

interface IbannerItem{
    path: string
    url: string
}

export interface IBanner{
    imgs: Array<IbannerItem>
}

export default class Banner extends Component{

    componentWillMount () { }

    componentDidMount () { }
  
    componentWillUnmount () { }
  
    componentDidShow () { }
  
    componentDidHide () { }
    

    config: Config = {

    }

    constructor(props){
        super(props);

        this.change = this.change.bind(this);
        this.jump = this.jump.bind(this);
    }

    jump(e){
        let {path} = e.currentTarget.dataset;
        
        console.log(path)
    }

    change(e){
        let current = e.detail.current;
        this.setState({
            current
        })
    }

    state = {
        current: 0,
    }

    render(){

        let { current } = this.state;
        let imgs = this.props && this.props.imgs ? this.props.imgs : [];

        return (

            <View className="banner">

                <View className="indicators">
                    {imgs.map((item, index) =>{
                        return (
                            <View className={ index == current ? 'active indicator' : 'indicator' } key={index}>
                            </View>
                        )
                    })}
                </View>
                
                <View>
                    <Swiper autoplay onChange={this.change} current={current} className='banner-content'>
                        {imgs.map((item, index) =>{

                           return (

                                <SwiperItem  onClick={this.jump} data-path={item.path} className='banner-item' key={index} data-path={item.path}>
                                    <View  className="banner-item-content" >
                                        <Image className='img' mode='aspectFill' src={item.url}></Image>
                                    </View>
                                </SwiperItem>
                           )
                            
                        })}
                    </Swiper>

                </View>
                
            </View>
            
        )
        
    }
    
    
}